<template>
  <div v-if="typeStr == 'spreadCourse'">
    <div v-show="showModal" @click.stop="closePoster" class="c-flex-row c-flex-center c-pf c-p-t0 c-p-l0 c-pz101 c-h c-w100 c-translucent-balck80">
      <div class="c-flex-column c-aligni-center">
        <img @click.stop="clickImg" src="" class="c-w80 c-br20 c-m-0auto app-save-img" id="spreadImg" />
        <div class="c-fs24 c-mt40 c-textAlign-c c-fc-white">长按上面图片保存海报</div>
      </div>
    </div>
    <div class="canvasBox">
      <div class="bg content c-p" id="canvas1">
        <div class="c-flex-row c-pa" style="left: 82px; top: 740px;">
          <img class="c-brp50" :src="$addXossFilter(posterInfo.uheadImg, require('@/assets/defult_head.png'))" style="width: 72px;height: 72px;">
          <div class="c-flex-column c-justify-sb" style="margin-left: 22px; height: 72px;">
            <span style="font-size: 28px;">{{posterInfo.uname && posterInfo.uname.length > 12 ? posterInfo.uname.substr(0,12) + '...' : posterInfo.uname}}</span>
            <span style="font-size: 24px;" class="c-fc-gray">向你推荐优质好店</span>
          </div>
        </div>
        <img class="c-pa" style="right:82px; bottom: 120px; width: 120px; height:120px;" :src="$addXossFilter(qrUrl)">
      </div>
    </div>
  </div>
  <div v-else-if="typeStr == 'spreadCoupon'">
    <div v-show="showModal" @click.stop="closePoster" class="c-pf c-p-t0 c-p-l0 c-pz100000 c-minh c-w100 c-maxw640 c-translucent-balck80">
      <div class="c-flex-column c-flex-center c-w100 c-h100vh c-pb180">
        <img @click.stop="clickImg" src="" class="c-ww400 c-br20 c-m-0auto app-save-img" id="spreadImg" />
        <div class="c-fs24 c-mt16 c-textAlign-c c-fc-white">长按上面图片保存海报</div>
        <div class="c-bg-white c-w100 c-flex-row c-justify-sa c-pa c-p-l0 c-p-b0">
          <div class="c-p c-pt20 c-pb24 c-ww90" v-for="(item, idx) in bgList" :key="idx" @click.stop="changeBg(idx)">
            <img :src="item" class="c-ww90"/>
            <span v-if="index == idx" class="iconfont c-fs26 theme-fc c-pa c-p-r16 c-p-b40">&#xe6eb;</span>
          </div>
        </div>
      </div>
    </div>
    <div class="canvasBox">
      <div class="bg0 content c-p" id="canvas0">
        <div class="c-flex-row c-pa" style="left: 20px; top: 28px; padding: 10px 10px; background-color: rgba(0, 0, 0, 0.2); border-radius: 40px;">
          <img class="c-brp50" :src="$addXossFilter(posterInfo.uheadImg, require('@/assets/defult_head.png'))" style="width: 58px;height: 58px;">
          <div class="c-flex-column c-justify-sb" style="margin-left: 6px; height: 58px;">
            <span style="font-size: 20px;" class="c-fc-white">{{posterInfo.uname && posterInfo.uname.length > 10 ? posterInfo.uname.substr(0,10) + '...' : posterInfo.uname}}</span>
            <span style="font-size: 20px;" class="c-fc-white">分享一张优惠券给你</span>
          </div>
        </div>
        <div class="c-pa c-flex-row" style="left: 102px; top: 574px;width: 436px;height: 124px;background: #f5f5f5;border-radius: 12px;">
          <div class="c-textAlign-c c-fc-white" style="font-size:36px;height: 124px;line-height:124px;width:152px;background: linear-gradient(139deg,#ff8661 3%, #ff6652 92%);border-top-left-radius: 12px;border-bottom-left-radius: 12px;">
            <span style="font-size: 22px;" v-if="Number(posterInfo.price) >= 0">{{'￥' | iosPriceFilter}}</span>{{posterInfo.price}}
          </div>
          <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1" style="height: 124px;font-size:18px;margin-left: 12px;padding-top:14px;padding-bottom:14px; border-radius: 12px;">
            <span class="c-text-ellipsis1 c-fc-xblack" style="font-size:22px;">{{posterInfo.name && posterInfo.name.length > 12 ? posterInfo.name.substr(0,12) + '...' : posterInfo.name}}</span>
            <span class="c-fc-gray" style="">{{posterInfo.timeStr}}</span>
            <span class="c-fc-gray" style="">{{posterInfo.statusStr && posterInfo.statusStr.length > 10 ? (posterInfo.statusStr.substr(0, 10) + '...') : posterInfo.statusStr}}</span>
          </div>
        </div>
        <div class="c-pa" style="left:230px; bottom: 100px;width: 180px; height:180px;padding-top:10px;padding-left:10px;background-color: #fff;">
          <img style="width: 160px; height:160px;" :src="$addXossFilter(qrUrl)">
        </div>
        <div class="c-flex-column c-aligni-center c-pa" style="left:188px; bottom: 52px;">
          <span class="c-fc-white" style="font-size: 24px;">长按或扫码，领取优惠券</span>
        </div>
      </div>
      <div class="bg1 content c-p" id="canvas1">
        <div class="c-flex-row c-pa" style="left: 28px; top: 28px; padding: 10px 10px; background-color: rgba(0, 0, 0, 0.2); border-radius: 40px;">
          <img class="c-brp50" :src="$addXossFilter(posterInfo.uheadImg, require('@/assets/defult_head.png'))" style="width: 58px;height: 58px;">
          <div class="c-flex-column c-justify-sb" style="margin-left: 6px; height: 58px;">
            <span style="font-size: 20px;" class="c-fc-white">{{posterInfo.uname && posterInfo.uname.length > 10 ? posterInfo.uname.substr(0,10) + '...' : posterInfo.uname}}</span>
            <span style="font-size: 20px;" class="c-fc-white">分享一张优惠券给你</span>
          </div>
        </div>
        <div class="c-pa c-flex-row" style="left: 102px; top: 454px;width: 436px;height: 124px;background: #f5f5f5;border-radius: 12px;">
          <div class="c-textAlign-c c-fc-white" style="font-size:36px;height: 124px;line-height:124px;width:152px;background: linear-gradient(139deg,#ff8661 3%, #ff6652 92%);border-top-left-radius: 12px;border-bottom-left-radius: 12px;">
            <span style="font-size: 22px;" v-if="Number(posterInfo.price) >= 0">{{'￥' | iosPriceFilter}}</span>{{posterInfo.price}}
          </div>
          <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1" style="height: 124px;font-size:18px;margin-left: 12px;padding-top:14px;padding-bottom:14px; border-radius: 12px;">
            <span class="c-text-ellipsis1 c-fc-xblack" style="font-size:22px;">{{posterInfo.name && posterInfo.name.length > 12 ? posterInfo.name.substr(0,12) + '...' : posterInfo.name}}</span>
            <span class="c-fc-gray" style="">{{posterInfo.timeStr}}</span>
            <span class="c-fc-gray" style="">{{posterInfo.statusStr && posterInfo.statusStr.length > 10 ? (posterInfo.statusStr.substr(0, 10) + '...') : posterInfo.statusStr}}</span>
          </div>
        </div>
        <div class="c-flex-column c-aligni-center c-pa" style="left:230px; bottom: 197px;width: 180px; height:180px;padding-top:10px;padding-left:10px;background-color: #fff;">
          <img style="width: 160px; height:160px;" :src="$addXossFilter(qrUrl)">
        </div>
        <div class="c-flex-column c-aligni-center c-pa" style="left:188px; bottom: 142px;">
          <span class="c-fc-white" style="font-size: 24px;">长按或扫码，领取优惠券</span>
        </div>
      </div>
      <div class="bg2 content c-p" id="canvas2">
        <div class="c-flex-row c-pa" style="left: 32px; top: 28px; padding: 10px 10px; background-color: rgba(0, 0, 0, 0.2); border-radius: 40px;">
          <img class="c-brp50" :src="$addXossFilter(posterInfo.uheadImg, require('@/assets/defult_head.png'))" style="width: 58px;height: 58px;">
          <div class="c-flex-column c-justify-sb" style="margin-left: 6px; height: 58px;">
            <span style="font-size: 20px;" class="c-fc-white">{{posterInfo.uname && posterInfo.uname.length > 10 ? posterInfo.uname.substr(0,10) + '...' : posterInfo.uname}}</span>
            <span style="font-size: 20px;" class="c-fc-white">分享一张优惠券给你</span>
          </div>
        </div>
        <div class="c-pa c-flex-row" style="left: 102px; top: 528px;width: 436px;height: 124px;background: #f5f5f5;border-radius: 12px;">
          <div class="c-textAlign-c c-fc-white" style="font-size:36px;height: 124px;line-height:124px;width:152px;background: linear-gradient(139deg,#ff8661 3%, #ff6652 92%);border-top-left-radius: 12px;border-bottom-left-radius: 12px;">
            <span style="font-size: 22px;" v-if="Number(posterInfo.price) >= 0">{{'￥' | iosPriceFilter}}</span>{{posterInfo.price}}
          </div>
          <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1" style="height: 124px;font-size:18px;margin-left: 12px;padding-top:14px;padding-bottom:14px; border-radius: 12px;">
            <span class="c-text-ellipsis1 c-fc-xblack" style="font-size:22px;">{{posterInfo.name && posterInfo.name.length > 12 ? posterInfo.name.substr(0,12) + '...' : posterInfo.name}}</span>
            <span class="c-fc-gray" style="">{{posterInfo.timeStr}}</span>
            <span class="c-fc-gray" style="">{{posterInfo.statusStr && posterInfo.statusStr.length > 10 ? (posterInfo.statusStr.substr(0, 10) + '...') : posterInfo.statusStr}}</span>
          </div>
        </div>
        <div class="c-flex-column c-aligni-center c-pa" style="left:230px; bottom: 170px;width: 180px; height:180px;padding-top:10px;padding-left:10px;background-color: #fff;">
          <img style="width: 160px; height:160px;" :src="$addXossFilter(qrUrl)">
        </div>
        <div class="c-flex-column c-aligni-center c-pa" style="left:188px; bottom: 118px;">
          <span class="c-fc-gray" style="font-size: 24px;">长按或扫码，领取优惠券</span>
        </div>
      </div>
      <div class="bg3 content c-p" id="canvas3">
        <div class="c-flex-row c-pa" style="left: 20px; top: 28px; padding: 10px 10px; background-color: rgba(0, 0, 0, 0.2); border-radius: 40px;">
          <img class="c-brp50" :src="$addXossFilter(posterInfo.uheadImg, require('@/assets/defult_head.png'))" style="width: 58px;height: 58px;">
          <div class="c-flex-column c-justify-sb" style="margin-left: 6px; height: 58px;">
            <span style="font-size: 20px;" class="c-fc-white">{{posterInfo.uname && posterInfo.uname.length > 10 ? posterInfo.uname.substr(0,10) + '...' : posterInfo.uname}}</span>
            <span style="font-size: 20px;" class="c-fc-white">分享一张优惠券给你</span>
          </div>
        </div>
        <div class="c-pa c-flex-row" style="left: 102px; top: 510px;width: 436px;height: 124px;background: #f5f5f5;border-radius: 12px;">
          <div class="c-textAlign-c c-fc-white" style="font-size:36px;height: 124px;line-height:124px;width:152px;background: linear-gradient(139deg,#ff8661 3%, #ff6652 92%);border-top-left-radius: 12px;border-bottom-left-radius: 12px;">
            <span style="font-size: 22px;" v-if="Number(posterInfo.price) >= 0">{{'￥' | iosPriceFilter}}</span>{{posterInfo.price}}
          </div>
          <div class="c-flex-column c-justify-sb c-w0 c-flex-grow1" style="height: 124px;font-size:18px;margin-left: 12px;padding-top:14px;padding-bottom:14px; border-radius: 12px;">
            <span class="c-text-ellipsis1 c-fc-xblack" style="font-size:22px;">{{posterInfo.name && posterInfo.name.length > 12 ? posterInfo.name.substr(0,12) + '...' : posterInfo.name}}</span>
            <span class="c-fc-gray" style="">{{posterInfo.timeStr}}</span>
            <span class="c-fc-gray" style="">{{posterInfo.statusStr && posterInfo.statusStr.length > 10 ? (posterInfo.statusStr.substr(0, 10) + '...') : posterInfo.statusStr}}</span>
          </div>
        </div>
        <div class="c-flex-column c-aligni-center c-pa" style="left:230px; bottom: 224px;width: 180px; height:180px;padding-top:10px;padding-left:10px;background-color: #fff;">
          <img style="width: 160px; height:160px;" :src="$addXossFilter(qrUrl)">
        </div>
        <div class="c-flex-column c-aligni-center c-pa" style="left:188px; bottom: 180px;">
          <span class="c-fc-white" style="font-size: 24px;">长按或扫码，领取优惠券</span>
        </div>
      </div>
    </div>
  </div>
  <div v-else></div>
</template>

<script>
let html2canvas = null;
let qr = null;
export default {
  name: "SharePoster",
  props: {
    showPoster: {
      type: Boolean,
      default: false
    },
    typeStr: {
      type: String,
      default: 'spreadCourse'
    },
    posterInfo: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  beforeCreate() {},
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : 'mb5_default',
      showModal: false,
      signInfo: null,
      qrUrl: '',
      index: 0, //选择第几个背景图的下标
      bgList: [
        "https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/p1.png",
        "https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/p2.png",
        "https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/p3.png",
        "https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/p4.png"
      ],
      speadImgList: [],
    };
  },
  mounted() {
    import(/* webpackChunkName: "html2canvas" */"@/utils/html2canvas.js").then(res => {
      html2canvas = res.default;
      import(/* webpackChunkName: "qr" */'@/utils/qr.js').then(res => {
        qr = res.default;
        let surl = this.typeStr == 'spreadCourse' ? window.location.href.split("#")[0] + "#/homePage/shareholder/shareholderDetail?listType=1&refereeId=" + localStorage.getItem("userId") + "&shareholderId=" + localStorage.getItem("shareholderId") : this.posterInfo.url;
        this.qrUrl = qr.getQrUrl({ url: surl, size: 70 });
        this.posterClick();
      });
    })
  },
  computed: {},
  watch: {
    showPoster(val) {
      this.showModal = val;
    },
    posterInfo: {
      handler(val, oldVal) {
        if (val) {
          this.showModal = this.showPoster;
          let surl = this.typeStr == 'spreadCourse' ? window.location.href.split("#")[0] + "#/homePage/shareholder/shareholderDetail?listType=1&refereeId=" + localStorage.getItem("userId") + "&shareholderId=" + localStorage.getItem("shareholderId") : val.url;
          setTimeout(() => {
            this.qrUrl = qr.getQrUrl({ url: surl, size: 70 });
            this.$nextTick(() => {
              this.posterClick();
            });
          }, 500);
        }
      },
      immediate: true,
      deep: true
    },
  },
  methods: {
    changeBg(idx) {
      let hasSpreadArr = this.speadImgList.filter(item => item.index == idx);
      this.index = idx;
      if (hasSpreadArr.length > 0) {
        document.querySelector("#spreadImg").setAttribute("src", this.$addXossFilter(hasSpreadArr[0].src));
        return;
      }
      this.$loading.show({
        text: "优惠海报生成中"
      });
      this.posterClick();
    },
    clickImg() { },
    posterClick() {
      this.signInfo = this.posterInfo;
      let $this = this
      if ($this.signInfo) {
        document.ontouchstart = null;
        document.ontuchmove = null;
        document.ontouchend = null;
        $this.$nextTick(() => {
          $this.canvas();
        });
      }
    },
    canvas() {
      let domTest = this.typeStr == 'spreadCourse' ? document.getElementById("canvas1") : document.getElementById("canvas" + this.index);
      if (!domTest) {
        return;
      }
      html2canvas(domTest, {
        useCORS: true,
        height: domTest.offsetHeight, // 解决当前页面生成图片出现白边问题
        width: domTest.offsetWidth,
      }).then(canvas => {// eslint-disable-line
        // document.body.appendChild(canvas);
        let ctx = canvas.getContext("2d");
        this.canvasToImage(ctx);
      });
    },
    closePoster() {
      this.$emit("closePoster");
    },
    //将canvas转成图片
    canvasToImage(ctx) {
      try {
        var dataURL = ctx.canvas.toDataURL("image/jpg");
        let ig = document.getElementById("spreadImg");
        //ig.setAttribute("src", dataURL);
        ig.src = dataURL;
        let spreadItem = {
          index: this.index,
          src: dataURL
        };
        this.$loading.hide();
        this.speadImgList.push(spreadItem);
        document.ontouchstart = true;
        document.ontuchmove = true;
        document.ontouchend = true;
        this.$emit("canvasOver");
      } catch (err) {
        console.log("canvas转成图片失败");
        console.log(err);
      }
    }
  },
  activated() { },
  deactivated() { }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component 640;
const CANVAS_HEIGHT = 1136;only -->
<style scoped>
.canvasBox {
  width: 640px;
  height: 1136px;
  top: -999999999px;
  left: -30000000px;
  z-index: -999;
  /* top: 0;
  left: 0;
  z-index: 1000001; */
  position: absolute;
}
.content {
  width: 640px;
  height: 1136px;
  position: relative;
}
.bg {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/posterBg.jpg") no-repeat 100%;
  background-size: 100% 100%;
}
.bg0 {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/p1.png") no-repeat 100%;
  background-size: 640px 1136px;
}
.bg1 {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/p2.png") no-repeat 100%;
  background-size: 640px 1136px;
}
.bg2 {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/p3.png") no-repeat 100%;
  background-size: 640px 1136px;
}
.bg3 {
  background: url("https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/newAreaAgent/p4.png") no-repeat 100%;
  background-size: 640px 1136px;
}
</style>
